<template>
  <div class="productCardLandscape">
    <div class="image-container">
      <u-image :src="img" :width="`${width}px`" :height="`${height}px`"></u-image>
    </div>
    <div class="order-info">
      <div class="title">{{ title }}</div>
      <div class="price">单价：<div class="price-number" :data-tag="orderType === 1 ? '￥' : '积分'">{{ price }}</div></div>
      <div class="orderType integral">{{ orderType === 1 ? '普通订单' : '积分订单' }}</div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
defineProps({
  img: {
    type: String,
    default: '',
  },
  title: {
    type: String,
    default: '',
  },
  price: {
    type: String,
    default: '',
  },
  orderType: {
    type: Number,
    default: 1
  }
});

const width = computed(() => uni.upx2px(208))
const height = computed(() => uni.upx2px(246))

</script>

<style lang="less" scoped>
.productCardLandscape {
  width: 100%;
  background: #fff;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  .image-container {
    flex-shrink: 0;
    margin-right: 16px;
  }

  .order-info {
    .title {
      font-size: 16px;
      color: #282828;
      margin-bottom: 10px;
    }
    .price {
      font-size: 14px;
      color: #939393;
      margin-bottom: 10px;
      .price-number {
        font-size: 16px;
        color: #282828;
        display: inline-block;
        &::before {
          content: attr(data-tag);
          font-size: 10px;
        }
      }
    }
    .orderType {
      display: inline-block;
      font-size: 10px;
      color: #B18300;
      padding: 2px 4px;
      &.integral {
        border: 1px solid #B18300;
      }
    }
  }
}
</style>
